import Head from '../../components/header';
import './index.less'
import { billArr } from './router'
import Bill from './bill'
import { Layout, Menu } from 'antd';
import { UserOutlined} from '@ant-design/icons';
import { Switch, Route, Redirect, BrowserRouter, NavLink, useHistory, useLocation } from 'react-router-dom';
import {browserHistory} from 'react-router'
import React, { useState, useEffect } from 'react'
import billStore from '../../store/billSrc';
import { observer } from 'mobx-react';





const { SubMenu } = Menu;
const { Sider } = Layout;

const BillManege=()=> {
    // let history = useHistory()
    // let location = useLocation()
    console.log(billStore);
    // console.log(browserHistory.getCurrentLocation().pathname);
    
    // const path = props.location.pathname
    
    const [currentSrc, setCurrentSrc] = useState(billStore.pathname);
    // console.log(path,currentSrc);
    
    if(billStore.pathname !== currentSrc){
        setCurrentSrc(billStore.pathname)
    }
    const fnSrc=(ev)=> {
        // console.log(ev.key);
        
        setCurrentSrc(ev.key);
    }
    // useEffect(() => {
    //     setCurrentSrc(currentSrc);
    //     console.log(location);
       
    // }, [location])
    
    return <BrowserRouter>
        <Layout className="billIndexCss">
            <Head></Head>
            <Layout>
                <Sider
                    breakpoint="lg"
                    collapsedWidth="0"
                    className="siderCss"
                >
                    <Menu 
                        defaultOpenKeys={['sub1']}
                        defaultSelectedKeys={['/home/billManege/bill']}
                        selectedKeys={currentSrc} 
                        onClick={fnSrc}
                        theme="dark" 
                        mode="inline" 
                       >
                        <SubMenu key="sub1" icon={<UserOutlined />} title="对账管理">
                                {
                                    billArr.map((item, index) => {
                                        
                                        if (item.children.length) {
                                            return item.children.map((item2, index2) => {
                                                // return <Menu.Item key={item2.path}>
                                                return <Menu.Item key={item2.path}>
                                                    <NavLink to={item2.path}>{item2.name}</NavLink>
                                                </Menu.Item>
                                            })
                                        } else {
                                            return <Menu.Item key={item.path}>{item.name}</Menu.Item>
                                        }
                                    })
                                }
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout style={{ padding: '10px 50px 24px',background:'#eee'}}>
                    <Switch>
                        {
                            billArr.map((item, index) => {
                                    if (item.children.length) {
                                        return item.children.map((item2, index2) => {
                                            return <Route key={index2} path={item2.path} component={item2.component}/>
                                        })
                                        
                                    } else {
                                        return <Route key={index} path={item.path} component={item.component}/>
                                    }       
                            })
                        }
                        <Redirect to="/home/billManege/bill"></Redirect>
                    </Switch>
                </Layout>
            </Layout>
        </Layout>
    </BrowserRouter>

}
export default observer(BillManege);